import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
  FlatList,
} from 'react-native';
import MenuLayout from '../../components/MenuLayout';
import {useContext, useState} from 'react';
import {ThemeContext} from '../../components/ThemeContextProvider';
import CallCard from './components/CallCard';
import GoodsCell from './components/GoodsCell'
export default function () {
  const {theme} = useContext(ThemeContext);
  const styles = StyleSheet.create({
    root: {
      width: '100%',
      height: '100%',
      flexDirection: 'row',
      backgroundColor: theme.bgGrey,
    },
    leftStatusList: {
      backgroundColor: theme.themeColor,
      alignItems: 'center',
      padding: 8,
      width: 96,
      height: '100%',
    },
    title: {
      fontSize: 16,
      fontWeight: 'bold',
      color: theme.fontColor,
      marginVertical: 20,
    },
    statusCardWrap: {
      flex: 1,
    },
    statusCard: {
      width: 80,
      height: 80,
      borderRadius: 12,
      backgroundColor: theme.themeColor,
      alignItems: 'center',
      justifyContent: 'center',
    },
    statusCardAtive: {
      backgroundColor: theme.bgGrey,
    },
    statusCardTitle: {
      fontSize: 12,
      color: theme.font2Color,
    },
    statusCardNum: {
      fontSize: 20,
      fontWeight: 'bold',
      lineHeight: 28,
      color: theme.font2Color,
    },
    statusCardTextActive: {
      color: theme.primaryColor,
    },
  });
  const statusOptions = [
    {
      text: '全部订单',
      key: 'all',
    },
    {
      text: '待接单',
      key: 'pending',
    },
    {
      text: '制作中',
      key: 'making',
    },
    {
      text: '待取餐',
      key: 'waiting',
    },
    {
      text: '已完成',
      key: 'done',
    },
    {
      text: '已退单',
      key: 'refused',
    },
  ];
  const [nowStatus, setNowStatus] = useState('all');
  const MainCard = () => {
    const mainStyle = StyleSheet.create({
      root: {
        width: 580,
        paddingHorizontal: 20,
      },
      header: {
        flexDirection: 'row',
        marginTop: 20,
        marginBottom: 20,
      },
      scrollWrap: {
        flex: 1,
      },
      btn1: {
        width: 100,
        height: 40,
        borderRadius: 8,
        backgroundColor: theme.primaryColor,
        justifyContent: 'center',
        alignItems: 'center',
      },
      btnText: {
        fontSize: 14,
        color: theme.themeColor,
      },
      btn2: {
        width: 100,
        height: 40,
        borderRadius: 8,
        backgroundColor: theme.bgColor,
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 1,
        borderColor: theme.dividerColor,
        marginLeft: 10,
      },
      btn2Text: {
        fontSize: 14,
        color: theme.fontColor,
      },
    });
    const [list, setList] = useState([
      {id: 0},
      {id: 1},
      {id: 2},
      {id: 3},
      {id: 4},
      {id: 10},
      {id: 11},
      {id: 12},
      {id: 13},
      {id: 14},
      {id: 20},
      {id: 21},
      {id: 22},
      {id: 23},
      {id: 24},
      {id: 30},
      {id: 31},
      {id: 32},
      {id: 33},
      {id: 34},
    ]);
    return (
      <View style={mainStyle.root}>
        <View style={mainStyle.header}>
          <TouchableOpacity activeOpacity={0.7} style={mainStyle.btn1}>
            <Text style={mainStyle.btnText}>叫号模式</Text>
          </TouchableOpacity>
          <TouchableOpacity activeOpacity={0.7} style={mainStyle.btn2}>
            <Text style={mainStyle.btn2Text}>静音</Text>
          </TouchableOpacity>
        </View>
        <FlatList
          style={styles.scrollWrap}
          data={list}
          numColumns={3}
          renderItem={({item, index, separators}) => (
            <TouchableOpacity
              activeOpacity={0.7}
              onPress={() => {
                console.log('容器');
              }}
              style={{
                width: 172,
                marginBottom: 10,
                marginRight: 10,
              }}
              key={item.id}>
              <CallCard></CallCard>
            </TouchableOpacity>
          )}></FlatList>
      </View>
    );
  };
  const RightCard = () => {
    const rightStyles = StyleSheet.create({
      root: {
        flex: 1,
        backgroundColor: theme.themeColor,
        height: '100%',
        padding: 20,
      },
      title: {
        fontSize: 16,
      },
      codeWrap: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
      },
      codeText: {
        fontSize: 36,
        lineHeight: 50,
        height: 50,
      },
      statusText: {
        fontSize: 16,
        color: theme.primaryColor,
      },
      tabs: {
        flexDirection: 'row',
        marginTop: 10,
      },
      tabItem: {
        flex: 1,
        height: 48,
        borderRadius: 8,
        backgroundColor: theme.themeColor,
        borderWidth: 1,
        borderColor: theme.dividerColor,
        alignItems: 'center',
        justifyContent: 'center',
      },
      tabText: {
        fontSize: 16,
        color: theme.fontColor,
      },
      tabItemActive: {
        backgroundColor: theme.primaryColor,
        borderColor: theme.primaryColor,
      },
      tabTextActive: {
        color: theme.themeColor,
      },
      ml10: {
        marginLeft: 10,
      },
      vipCell: {
        paddingVertical: 10,
        marginTop: 10,
        borderBottomWidth: 1,
        borderColor: theme.dividerColor,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
      }
    });
    const [showType, setShowType] = useState(1);
    return (
      <View style={rightStyles.root}>
        <Text style={rightStyles.title}>POS点单</Text>
        <View style={rightStyles.codeWrap}>
          <Text style={rightStyles.codeText}>T101</Text>
          <Text style={rightStyles.statusText}>待接单</Text>
        </View>
        <View style={rightStyles.tabs}>
          <TouchableOpacity
            activeOpacity={0.7}
            style={[
              rightStyles.tabItem,
              showType === 1 ? rightStyles.tabItemActive : '',
            ]}
            onPress={() => {
              setShowType(1);
            }}>
            <Text
              style={[
                rightStyles.tabText,
                showType === 1 ? rightStyles.tabTextActive : '',
              ]}>
              商品
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            activeOpacity={0.7}
            style={[
              rightStyles.tabItem,
              rightStyles.ml10,
              showType === 2 ? rightStyles.tabItemActive : '',
            ]}
            onPress={() => {
              setShowType(2);
            }}>
            <Text
              style={[
                rightStyles.tabText,
                showType === 2 ? rightStyles.tabTextActive : '',
              ]}>
              会员
            </Text>
          </TouchableOpacity>
        </View>
        <ScrollView>
            {showType===1?<GoodsCell></GoodsCell>:<>
            <View style={rightStyles.vipCell}>
                <Text>会员手机</Text>
                <Text>1899999999</Text>
            </View>
            </>}
        </ScrollView>
      </View>
    );
  };
  return (
    <MenuLayout active="Call">
      <View style={styles.root}>
        <View style={styles.leftStatusList}>
          <Text style={styles.title}>叫号管理</Text>
          <ScrollView style={styles.statusCardWrap}>
            {statusOptions.map(item => (
              <TouchableOpacity
                style={[
                  styles.statusCard,
                  nowStatus === item.key ? styles.statusCardAtive : '',
                ]}
                activeOpacity={0.7}
                onPress={() => {
                  setNowStatus(item.key);
                }}>
                <Text
                  style={[
                    styles.statusCardTitle,
                    nowStatus === item.key ? styles.statusCardTextActive : '',
                  ]}>
                  {item.text}
                </Text>
                <Text
                  style={[
                    styles.statusCardNum,
                    nowStatus === item.key ? styles.statusCardTextActive : '',
                  ]}>
                  0
                </Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>
        <MainCard></MainCard>
        <RightCard></RightCard>
      </View>
    </MenuLayout>
  );
}
